<template>
  <div>
    <el-form class="query-form" @submit.native.prevent :inline="true">
      <el-form-item>
        <select-address
          v-model="params['customer_address_code.codelike']"
          auto-top
          clearable
          placeholder="所属地"
          @change="getData"
        ></select-address>
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="params.business_name"
          :clearable="true"
          placeholder="经营者查询"
          @change="getData"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-input
          v-model="params.submit_person_name"
          :clearable="true"
          placeholder="操作用户"
          @change="getData"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>

      <el-form-item class="float-right">
        <el-button type="primary" icon="el-icon-upload2" @click="handleUpload()">导入</el-button>
        <el-button type="primary" icon="el-icon-download" @click="handleDownload()">导出</el-button>
      </el-form-item>
    </el-form>

    <div class="card">
      <el-tabs tab-position="left" style="height: calc(100vh - 160px); overflow-y: auto">
        <el-tab-pane>
          <span slot="label">
            <i class="fa fa-fw fa-tree"></i>
            种植类
          </span>
          <div class="py-3 pr-3">
            <scale-plant ref="tabPlant" :params="params"></scale-plant>
          </div>
        </el-tab-pane>
        <el-tab-pane label="养殖类">
          <span slot="label">
            <i class="fa fa-fw fa-leaf"></i>
            养殖类
          </span>
          <div class="py-3 pr-3">
            <scale-breed ref="tabBreed" :params="params"></scale-breed>
          </div>
        </el-tab-pane>
        <el-tab-pane label="水产类">
          <span slot="label">
            <i class="fa fa-fw fa-snowflake-o"></i>
            水产类
          </span>
          <div class="py-3">
            <scale-aquatic ref="tabAquatic" :params="params"></scale-aquatic>
          </div>
        </el-tab-pane>
        <el-tab-pane label="加工类">
          <span slot="label">
            <i class="fa fa-fw fa-fire"></i>
            加工类
          </span>
          <div class="py-3">
            <scale-process ref="tabProcess" :params="params"></scale-process>
          </div>
        </el-tab-pane>
        <el-tab-pane label="服务类">
          <span slot="label">
            <i class="fa fa-fw fa-comments-o"></i>
            服务类
          </span>
          <div class="py-3">
            <scale-service ref="tabService" :params="params"></scale-service>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <import-excel
      :visible.sync="importDialogVisible"
      title="导入经营规模数据"
      :post-api="importUrl"
      :excel-template="importTemplate"
      @success="getData"
    >
      <div slot="header" class="mb-5">
        <div class="text-muted mb-1">选择要导入的数据类型</div>
        <el-radio-group v-model="importIndex" @change="handleImportChange">
          <el-radio-button v-for="(item, index) in importList" :key="index" :label="index">
            {{ item.type }}
          </el-radio-button>
        </el-radio-group>
      </div>
    </import-excel>

    <el-dialog :visible.sync="exportDialogVisible" append-to-body :close-on-click-modal="false">
      <div class="text-center">
        <div class="text-muted mb-3">选择要导出的数据类型</div>
        <el-radio-group v-model="importIndex">
          <el-radio-button v-for="(item, index) in importList" :key="index" :label="index">
            {{ item.type }}
          </el-radio-button>
        </el-radio-group>
        <div class="my-5 text-center">
          <el-button
            type="primary"
            icon="el-icon-download"
            :loading="exportLoading"
            @click="download"
          >
            导出
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SelectAddress from '@/components/select/SelectAddress'
import ImportExcel from '@/components/ImportExcel'
import ScalePlant from './ScalePlant'
import ScaleBreed from './ScaleBreed'
import ScaleAquatic from './ScaleAquatic'
import ScaleProcess from './ScaleProcess'
import ScaleService from './ScaleService'

export default {
  components: {
    SelectAddress,
    ImportExcel,
    ScalePlant,
    ScaleBreed,
    ScaleAquatic,
    ScaleProcess,
    ScaleService,
  },
  props: {},
  data() {
    return {
      params: {
        customer_name: '',
        submit_person_name: '',
        'customer_address_code.codelike': '',
      },

      // 导入
      importIndex: 0,
      importDialogVisible: false,
      importUrl: '',
      importTemplate: '',
      importList: [
        { type: '种植', template: '经营数据(种植)', url: 'datum_customer_industrial_crop_import' },
        { type: '养殖', template: '经营数据(养殖)', url: 'datum_customer_industrial_breed_import' },
        {
          type: '水产',
          template: '经营数据(水产)',
          url: 'datum_customer_industrial_aquatic_import',
        },
        {
          type: '加工',
          template: '经营数据(加工)',
          url: 'datum_customer_industrial_process_import',
        },
        {
          type: '服务',
          template: '经营数据(服务)',
          url: 'datum_customer_industrial_service_import',
        },
      ],
      // 导出
      exportDialogVisible: false,
      exportLoading: false,
      submit_type: '',
    }
  },
  computed: {
    ...mapGetters(['org']),
  },
  watch: {},
  created() {
    this.params['customer_address_code.codelike'] = this.$utils.getAddressCode()
    this.submit_type = this.$utils.getClientOrgClass() === 'org_gov_ny' ? '1' : '4'
    this.params['submit_type.eq'] = this.submit_type
    this.handleImportChange()

    this.$nextTick(() => {
      this.getData()
    })
  },
  mounted() {},
  methods: {
    async getData() {
      this.$refs.tabPlant.getData()
      this.$refs.tabBreed.getData()
      this.$refs.tabAquatic.getData()
      this.$refs.tabProcess.getData()
      this.$refs.tabService.getData()
    },
    handleImportChange() {
      const item = this.importList[this.importIndex]
      this.importUrl = `/api/credit/import/?importKey=${item.url}_template`
      this.importTemplate = `/static/files/${item.template}导入模板.xlsx`
    },
    handleUpload() {
      this.importDialogVisible = true
    },
    handleDownload() {
      this.exportDialogVisible = true
    },
    async download() {
      const item = this.importList[this.importIndex]
      const exportParams = {
        service: this.$serviceName,
        table: `${item.url}_view`,
        params: this.params,
        filename: `${item.template}.xlsx`,
      }
      this.exportLoading = true
      await this.$utils.promise(this.$api.exportData(exportParams))
      this.exportLoading = false
    },
  },
}
</script>

<style lang="scss" scoped></style>
